<template>
	<!-- 热门视频更多没有搜索 三级菜单 -->
	<div class="main-box">
		<header>
			<div class="icon-box" @click="clickBack">
				<van-icon name="arrow-left" size="1.2rem" color="#333333"/>
			</div> 				
			<p> {{this.$channel === 'zxjtqh'?'热门视频':'视频推荐'}}</p>
       </header>
		<div class="tab-bar-box">
			<div class="one-tab-box">
				<van-tabs v-if="firstMenu.list.length" v-model="firstMenu.active" class="one-tab" @click="clickFirstTabs()"
					swipe-threshold='3' line-width='30px'>
					<van-tab v-for="v in firstMenu.list" :title="v.name" :name='v.id' :key="v.id"></van-tab>
				</van-tabs>
			</div>
			<van-tabs v-if="secondMenu.list.length" v-model="secondMenu.active" class="two-tab" swipe-threshold='3'
				@click="clickSecondTabs">
				<van-tab v-for="v in secondMenu.list" :title="v.name" :name='v.id' :key="v.id"></van-tab>
			</van-tabs>      
		</div>		
		<van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="—   没有更多了  —"
			@load="onLoad">
			<ListView :videoList='videoList' @formChildMsg='formChildData'></ListView>
		</van-list>
	</div>
</template>

<script>
import { dotNum, getTsMenu, getGreadVideo, getTspdVideos, getCategory } from '@/util/api.js';
import ListView from '@/pages/homeComponents/shortVideoItem.vue'; //tab组件
export default {
	components: {
		ListView,//列表区域
	},
	data() {
		return {
			page: 1, //页数
			firstMenu: {
				list: [],
				active: '',
			},
			secondMenu: {
				list: [],
				active: '',
			},
			menuId: this.$route.query.menuId,
			loading: true,
			finished: false,
			typeId: 0,
			tagsId: '',
			typeId: '',
			videoList: [],
		}
	},
	created() {
		this.getMenuData();
		dotNum('videoRecommendPage');
	},
	methods: {
		//菜单
		async getMenuData() {
			try {
				const dataMsg = await getTsMenu();
				const { code, data } = dataMsg.data;
				if (code === '000000') {
					const { length } = data;
					if (length) {
						const arr = [{
							channel: '',
							id: '-100',
							name: "全部",
							sort: ''
						}]
						this.firstMenu.list = [...arr, ...data];
					}
					this.getGreadVideoFun()
				}

			} catch (error) {

			}
		},
		//子菜单 
		async getCategory(menuId) {
			try {
				const dataMsg = await getCategory(menuId, 3);
				const { code, data } = dataMsg.data;
				if (code === '000000') {
					const { length } = data;
					if (length) {
						this.secondMenu.list = data;
						const { id } = data[0];
						this.getTsVideoData(id)
					} else {
						this.loading = false;
						this.finished = true;
					}
				}
			} catch (error) {

			}
		},
		//特色频道
		async getTsVideoData(typeId) {
			const params = {
				'page': this.page,
				'pageSize': 10,
				'typeId': typeId,
				'gradeId': '',
				'tagsId': '',
			};
			try {
				const dataMsg = await getTspdVideos(params);
				const { code, data } = dataMsg.data;
				if (code === '000000') {
					this.loading = false;
					const { length } = data;
					this.videoList = [...this.videoList, ...data];
					if (length == 10) {
						this.page++;
					} else {
						this.finished = true;
					}
				}

			} catch (error) {

			}
		},
		//全部 精彩视频
		async getGreadVideoFun() {
			const params = {
				"p": this.page,
				"sel": '',
				"pType": '',
				"type": '',
			};
			try {
				const dataMsg = await getGreadVideo(params);
				const { code, data } = dataMsg.data;
				if (code === '000000') {
					this.loading = false;
					const { length } = data;
					this.videoList = [...this.videoList, ...data];
					if (length == 10) {
						this.page++;
					} else {
						this.finished = true;
					}
				}

			} catch (error) {

			}
		},
		//下拉列表
		onLoad() {
			const { active } = this.firstMenu;
			if (active == -100 || !active) {//全部
				this.getGreadVideoFun();
			} else {
				const { active } = this.secondMenu;
				this.getTsVideoData(active)
			}
		},
		//一级菜单
		clickFirstTabs() {
			const { active } = this.firstMenu;
			this.secondMenu = {
				list: [],
				active: '',
			}
			this.page = 1;
			this.videoList = [];
			this.loading = true;
			this.finished = false;
			if (active == -100) {//全部
				this.getGreadVideoFun()
			} else {//特色频道
				//查询子菜单
				this.getCategory(active)
			}
		},
		clickSecondTabs() {
			const { active } = this.secondMenu;
			this.page = 1;
			this.videoList = [];
			this.loading = true;
			this.finished = false;
			this.getTsVideoData(active)
		},
		clickBack() {
			this.$router.push({
				path: `/${this.$channel}/home`
			});
		},
	}
}
</script>

<style scoped="scoped" lang="less">
.main-box {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	background-color: rgba(202, 201, 201, 0.3);
    header{
      width: 100%;
      height: 88px;
      line-height: 88px;
      text-align: center;
      font-size: 32px;
      color: #333333;
      background: rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid #F5F5F5;
	  position: relative;
      .icon-box{
        width: 80px;
        height: 88px;
        position: absolute;
        left: 0px;
        top:0px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
	/deep/.van-list__finished-text {
		font-size: 26px;
	}

	/deep/.van-loading__text {
		font-size: 26px;
	}

	.two-tab {
		/deep/.van-tab--active {
			background: white;
		}
	}

	.tab-bar-box {
		width: 100%;

		.one-tab-box {
			width: 100%;
			height: 88px;
			margin-bottom: 25px;
			height: 100%;
			background: rgba(255, 255, 255, 0.5);
			display: flex;
			position: relative;

			.one-tab {
				padding-left: 10px;
				margin: auto;

				/deep/ .van-tabs__wrap {
					height: 88px;

					.van-tabs__nav {
						background: none;

						.van-tab {
							font-size: 30px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							justify-content: flex-start;
							flex: none;
							margin-right: 50px;

							&:nth-last-child(2) {
								margin: 0;
							}
						}

						.van-tabs__line {
							bottom: 30px;
							height: 2px;
							background-color: red;
						}

						.van-tab--active {
							font-weight: bold;
						}
					}
				}
			}

		}


		.two-tab {
			width: 100%;
			height: 56px;
			margin-bottom: 25px;
			padding: 0px 32px;

			/deep/ .van-tabs__wrap {
				height: 100%;

				.van-tabs__nav {
					background: none;

					.van-tab {
						margin-right: 13px;
						font-size: 27px;
						font-weight: bolder;
						color: rgba(51, 51, 51, 0.8);
						// border: 2px solid #FFFFFF;
						border: 2px solid #181B26;
						border-radius: 28px;
						flex: none;
						padding: 0 35px;
						line-height: normal;

						.van-tab__text {
							line-height: 70px;
						}
					}

					.van-tab--active {
						background: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}

		.three-tab {
			width: 100%;
			height: 24px;
			margin-bottom: 25px;
			padding: 0px 32px;

			/deep/ .van-tabs__wrap {
				height: 100%;


				.van-tabs__nav {
					background: none;

					.van-tab {
						font-size: 24px;
						color: rgba(255, 255, 255, 0.7);
						justify-content: flex-start;
						flex: none;
						margin-right: 20px;
						line-height: normal;
						color: #333333cc;
					}

					.van-tab--active {
						color: #333333;
						font-weight: 500;

					}
				}
			}
		}
	}
}</style>
